@import '../../../styles/mixins.scss';

$checkSvg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'%3E%3C/path%3E%3C/svg%3E");

.navigation-item,
%navigation-item {
  @include navigationItemBase;

  color: var(--color-text-secondary);
  cursor: pointer;
  display: block;
  margin: 0 0 0 var(--space-24);

  @media (max-width: 900px) {
    padding-top: var(--space-08);
  }

  &--active {
    color: var(--color-text-accent);
    font-weight: var(--font-weight-semibold);
  }

  &--with-trail {
    &:last-of-type::after {
      display: none;
    }

    &::after {
      background: var(--color-border-primary);
      content: ' ';
      display: block;
      height: calc(100% - 1.2rem - 12px);
      left: calc(-1.2rem - 1px);
      position: absolute;
      top: calc(2.4rem + 6px);
      width: 2px;

      @media (max-width: 900px) {
        left: calc(-1.2rem - 2px);
        top: calc(2.4rem + 7px);
      }
    }
  }

  &--with-bullet {
    &::before {
      background-size: 24px;
      border-radius: 50%;
      box-shadow: inset 0 0 0 3px var(--color-border-primary);
      box-sizing: border-box;
      content: ' ';
      display: block;
      height: 24px;
      left: -24px;
      overflow: hidden;
      padding: 5px 4px;
      position: absolute;
      top: 0.6rem;
      transition: box-shadow 0.28s;
      width: 24px;

      @media (max-width: 900px) {
        top: 0.5rem;
      }
    }

    &:hover::before {
      box-shadow: inset 0 0 0 2.4rem var(--color-border-accent);
    }
  }
}
